<template>
  <div class="grant-list">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>发放批次列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入活动名称、编号或创建人姓名"
            v-model="search"
            clearable
            style="width:300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            @click="_reset"
            style=" line-height: 32px;padding: 0 21px;">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary"
            @click="add"
            size="small">
            新增发放批次
          </el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-table max-height="550"
            :data="tableData">
            <el-table-column label="ID"
              prop="id">
            </el-table-column>
            <el-table-column label="创建时间"
              prop="createTime">
            </el-table-column>
            <el-table-column label="创建人"
              prop="name">
            </el-table-column>
            <el-table-column label="发放批次名称"
              prop="provideName">
            </el-table-column>
            <el-table-column label="开始时间"
              prop="startTime">
            </el-table-column>
            <el-table-column label="结束时间"
              prop="endTime">
            </el-table-column>
            <el-table-column label="发券总量"
              prop="num">
            </el-table-column>
            <el-table-column label="状态"
              prop="stateName">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="handler(scope.row)">
                  {{scope.row.state ==1? "下线":"上线"}}
                </el-button>
                <el-button type="text"
                  @click="edit(scope.row)">设置</el-button>
                <el-button type="text"
                  :disabled="!scope.row.qrCode"
                  @click="downloadIamge(scope.row.qrCode)">下载二维码</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="600px">
      <el-form label-width="150px"
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules">
        <el-form-item label="发放批次名称"
          prop="name">
          <el-input placeholder="请输入发放批次名称"
            v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="每种券发放数量"
          prop="num">
          <el-input-number v-model="ruleForm.num"
            controls-position="right"
            :precision="0"
            :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="发放时间" required
          prop="startTime">
          <el-date-picker v-model="startEndTime"
            @change="startEndTimeChange"
            :picker-options="pickerOptions"
            type="datetimerange"
            size="small"
            :clearable="false"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="sure('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { downloadIamge } from "@/public/js/util";
import {
  getProvidesList,
  setProvideState,
  setProvide
} from "@/public/js/coupon";
export default {
  components: {},
  props: {},
  data() {
    var checkTime = (rule, value, callback) => {
      setTimeout(() => {
        if (!value) {
          return callback(new Error("请输人活动时间"));
        }
        if (value == this.ruleForm.endTime) {
          callback(new Error("结束时间不能小于等于开始时间"));
        } else {
          callback();
        }
      }, 1);
    };
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      id: "",
      search: "",
      title: "新增发放批次",
      dialogVisible: false,
      downloadIamge,
      startEndTime: [],
      tableData: [],
      ruleForm: {
        id: "",
        buyId: this.$route.query.id,
        name: "",
        num: undefined,
        startTime: "",
        endTime: ""
      },
      pickerOptions: {
        disabledDate: function disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },

      rules: {
        name: [
          { required: true, message: "请输入发放批次名称", trigger: "blur" }
        ],
        num: [{ required: true, message: "请输入发放数量", trigger: "blur" }],
        startTime: [{ validator: checkTime, trigger: "blur" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    //翻页查询
    handleSizeChange() {},
    handleCurrentChange() {},
    startEndTimeChange(startEndTime) {
      this.ruleForm.startTime = startEndTime[0];
      this.ruleForm.endTime = startEndTime[1];
    },
    _getProvidesList() {
      getProvidesList({
        id: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        search: this.search
      }).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.provides;
      });
    },
    //新增优惠券
    add() {
      this.title = "新增发放批次";
      this.startEndTime = [];
      (this.ruleForm = {
        id: "",
        buyId: this.id,
        name: "",
        num: undefined,
        startTime: "",
        endTime: ""
      }),
        (this.dialogVisible = true);
    },
    _reset() {
      this.pageNum = 1;
      this.pageSize = 10;
      this._getProvidesList();
    },
    //上线下线
    handler({ id, state }) {
      let str = state == 1 ? "下线" : "上线";
      this.$confirm(`是否${str}改批次优惠券?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        setProvideState({
          id,
          state: state == 1 ? 2 : 1
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this._getProvidesList();
          }
        });
      });
    },
    //编辑
    edit(row) {
      console.log(row);
      let { id, provideName, num, startTime, endTime } = row;
      this.ruleForm = {
        id,
        buyId: this.$route.query.id,
        name: provideName,
        num,
        startTime,
        endTime
      };
      this.startEndTime = [startTime, endTime];
      this.title = "修改发放批次";
      this.dialogVisible = true;
    },
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          setProvide(this.ruleForm).then(res => {
            if (!res.data.errCode) {
              this.dialogVisible = false;
              this.$message.success("操作成功");
              this._getProvidesList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this._getProvidesList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>